<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('过滤空格')}`">{{ $t('过滤空格') }}</t>
            <p>通过<span class="s-code">trim</span>字段，你可以便捷的设置输入框内容存在空格的规则</p>
        </template>
        <div style="width: 300px; color: #666;">
            <p>过滤全部空格</p>
            <sib-item v-model="value1" :props="props1"></sib-item>
            <p>过滤首尾空格</p>
            <sib-item v-model="value2" :props="props2"></sib-item>
            <p>不过滤空格</p>
            <sib-item v-model="value3" :props="props3"></sib-item>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value1 = ref(null);
        const props1 = reactive({ type: 'text', trim: 'all' });

        const value2 = ref(null);
        const props2 = reactive({ type: 'text', trim: 'common' });

        const value3 = ref(null);
        const props3 = reactive({ type: 'text', trim: 'none' });

        return {
            props1,
            value1,
            props2,
            value2,
            props3,
            value3,
            templateString: `<template>
    <p>过滤全部空格</p>
    <sib-item v-model="value1" :props="props1"></sib-item>
    <p>过滤首尾空格</p>
    <sib-item v-model="value2" :props="props2"></sib-item>
    <p>不过滤空格</p>
    <sib-item v-model="value3" :props="props3"></sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value1 = ref(null);
        const props1 = reactive({ type: 'text', trim: 'all' });

        const value2 = ref(null);
        const props2 = reactive({ type: 'text', trim: 'common' });

        const value3 = ref(null);
        const props3 = reactive({ type: 'text', trim: 'none' });

        return {
            props1,
            value1,
            props2,
            value2,
            props3,
            value3,
        };
    },
};
<\/script>`,
        };
    },
};
</script>
